<template>
  <div class="block">
    <div class="security_set">
      <h4>安全设置</h4>
      <ul class="revise">
        <li class="revise_item">
          <div class="revise_item_meta">
            <span>
              <svg-icon icon-class="wechat" />
            </span>
            <div class="revise_item_meta_content">
              <h4>绑定微信</h4>
              <div class="revise_item_meta_desc">{{ wechat }}</div>
            </div>
          </div>
          <div class="revise_item_action" v-if="isShow">
            <a style="color: #1890ff; font-size: 14px" @click="bindWechat"
              >绑定</a
            >
          </div>
        </li>
        <li class="revise_item">
          <div class="revise_item_meta">
            <span>
              <svg-icon icon-class="QQ" />
            </span>
            <div class="revise_item_meta_content">
              <h4>绑定QQ</h4>
              <div class="revise_item_meta_desc">当前未绑定QQ账号</div>
            </div>
          </div>
          <div class="revise_item_action">
            <a style="color: #1890ff; font-size: 14px">绑定</a>
          </div>
        </li>
        <li class="revise_item">
          <div class="revise_item_meta">
            <span>
              <svg-icon icon-class="weibo" />
            </span>
            <div class="revise_item_meta_content">
              <h4>绑定微博</h4>
              <div class="revise_item_meta_desc">当前未绑定微博账号</div>
            </div>
          </div>
          <div class="revise_item_action">
            <a style="color: #1890ff; font-size: 14px">绑定</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getInfo } from "@/service/user";
export default {
  name: "",
  data() {
    return {
      wechat: "当前未绑定微信账号",
      isShow: true,
    };
  },
  methods: {
    bindWechat() {
      window.location.href =
        "https://open.weixin.qq.com/connect/qrconnect?appid=wx4d8509490b1022b0&redirect_uri=http://account.dev.histron.cn/personalmrg/userAuthsApi/bindWX&response_type=code&scope=snsapi_login&state=5#wechat_redirect";
    },
    getWxInfo() {
      getInfo().then((res) => {
        if (res.data.wxNickName) {
          this.wechat = res.data.wxNickName;
          this.isShow = false;
        }
      });
    },
  },
  created() {
    this.getWxInfo();
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.block {
  width: 100%;
  display: flex;
  .security_set {
    width: 100%;
    padding: 0 50px 20px;
    > h4 {
      font-size: 18px;
      font-weight: normal;
      // margin: 0;
      margin: 10px 0 30px;
    }
    .revise {
      width: 100%;
      list-style: none;
      margin: 0;
      padding: 0;
      .revise_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f0f0f0;
        padding: 15px 10px;
        .revise_item_meta {
          display: flex;
          span {
            display: block;
            font-size: 48px;
            line-height: 48px;
            border-radius: 2px;
            margin-right: 10px;
          }
          h4 {
            margin: 0;
            padding: 0;
            margin-bottom: 4px;
            color: rgba(0, 0, 0, 0.85);
            font-size: 14px;
            line-height: 1.6;
            font-weight: normal;
          }
          .revise_item_meta_desc {
            color: rgba(0, 0, 0, 0.45);
            font-size: 14px;
            line-height: 1.6;
          }
        }
      }
    }
  }
}
</style>